<template>
  <div style="height: 100%;">
    <!-- 聚类 -->
    <div class="julei">
      <div class="m_title">
        <div class="divider"></div>
        <strong>整体评估</strong>
      </div>
      <div class="text">
        <p style="color: #5d637e;">
          Silhouette Score：<strong style="color: #373b52;">{{
            modelData.data ? modelData.data.silhouette : '-'
          }}</strong>
        </p>
        <a-row>
          <a-col :span="12" style="text-align: left;"
            ><span style="color: #5d637e;">Clusters：</span></a-col
          >
          <a-col :span="12" style="text-align: right;">
            <a-tooltip
              placement="topRight"
              :overlay-style="{ width: '100%', align: 'right' }"
            >
              <template slot="title">
                <span>{{
                  `${featureString}~k=${modelData.param && modelData.param.k}`
                }}</span>
              </template>
              <div class="tooltip-text">
                {{
                  `${featureString}~k=${modelData.param && modelData.param.k}`
                }}
              </div>
            </a-tooltip>
          </a-col>
        </a-row>
      </div>
      <div class="colorBlock">
        <div
          style="background: #e5e5e5; display: flex; height: 80px; width: 100%;"
        >
          <div
            v-for="(item, index) in modelData.data &&
            modelData.data.cluster_centers"
            :key="'cluster' + index"
            class="general"
            :style="{ background: colorGallery[index], width: getSpan(index) }"
          >
            <div class="circle"></div>
            <div class="dash">
              <svg style="height: 100%; width: 100%;">
                <g fill="none" stroke="white" stroke-width="1">
                  <line
                    x1="0"
                    y1="50%"
                    x2="100%"
                    y2="50%"
                    stroke-dasharray="5 5"
                    stroke="white"
                  />
                  <line
                    x1="50%"
                    y1="0"
                    x2="50%"
                    y2="100%"
                    stroke-dasharray="5 5"
                    stroke="white"
                  />
                  <circle
                    r="8"
                    cx="50%"
                    cy="50%"
                    stroke-dasharray="5,5"
                  ></circle>
                </g>
              </svg>
            </div>
            <div class="size-text">
              {{ modelData.data && modelData.data.cluster_sizes[index] }}
            </div>
            <div ref="detail" class="detail">
              <p>中心坐标</p>
              <div v-if="feature_list2.length > 9">
                <div
                  v-for="(feature, row) in 9"
                  :key="'feature_row' + row"
                  class="row"
                >
                  <div
                    v-for="(feature, col) in Math.ceil(
                      feature_list2.length / 9
                    )"
                    :key="`${row}-${col}`"
                    :style="{ width: colWidth[index][col] }"
                  >
                    <p
                      v-show="row + col * 9 < feature_list2.length"
                      style="white-space: nowrap;"
                    >
                      {{
                        `${feature_list2[row + col * 9]}: ${
                          item[row + col * 9]
                        }`
                      }}
                    </p>
                  </div>
                </div>
              </div>

              <p
                v-for="(feature, index2) in modelData.data &&
                modelData.data.feature_list"
                v-else
                :key="'feature_list' + index2"
              >
                {{ `${feature}：${item[index2]}` }}
              </p>
            </div>
          </div>
        </div>
        <!-- <a-row>
          <a-col
            v-for="(item, index) in modelData.data &&
            modelData.data.cluster_centers"
            :key="index"
            class="general"
            :style="{ background: colorGallery[index] }"
            :span="getSpan(index)"
          >
            <div class="circle"></div>
            <div class="dash">
              <svg style="height: 100%; width: 100%;">
                <g fill="none" stroke="white" stroke-width="1">
                  <line
                    x1="0"
                    y1="50%"
                    x2="100%"
                    y2="50%"
                    stroke-dasharray="5 5"
                    stroke="white"
                  />
                  <line
                    x1="50%"
                    y1="0"
                    x2="50%"
                    y2="100%"
                    stroke-dasharray="5 5"
                    stroke="white"
                  />
                  <circle
                    r="8"
                    cx="50%"
                    cy="50%"
                    stroke-dasharray="5,5"
                  ></circle>
                </g>
              </svg>
            </div>
            <div class="size-text">
              {{ modelData.data && modelData.data.cluster_sizes[index] }}
            </div>
            <div class="detail">
              <p>中心坐标</p>
              <div v-if="feature_list2.length > 9">
                <a-row v-for="(feature, row) in 8" :key="row" :gutter="16">
                  <a-col
                    v-for="(feature, col) in Math.ceil(
                      feature_list2.length / 9
                    )"
                    :key="col"
                    :span="24 / Math.ceil(feature_list2.length / 9)"
                  >
                    <span style="white-space: nowrap;">
                      {{
                        `${feature_list2[row + col * 9]}: ${
                          feature_list2[row + col * 9]
                        }`
                      }}</span
                    >
                  </a-col>
                </a-row>
              </div>

              <p
                v-else
                v-for="(feature, index2) in modelData.data &&
                modelData.data.feature_list"
                :key="index2"
              >
                {{ `${feature}：${item[index2]}` }}
              </p>
            </div>
          </a-col>
        </a-row> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: {},
})
export default class KMeans extends Vue {
  // @Prop({ type: Object, default: () => {} }) modelData!: any
  public featureString: string | null = null
  // public modelData: any = {}
  public trainStatus: string | null = null
  // 颜色块组
  public colorGallery: any = [
    '#FFC1C1',
    '#EEDD82',
    '#EEE0E5',
    '#BCD2EE',
    '#E0EEE0',
    '#CDB38B',
    '#E6E6FA',
    '#D8BFD8',
    '#D3D3D3',
    '#FAEAD3',
  ]
  public colWidth: any = undefined

  // kmeans
  public feature_list2: any = []

  public get modelData() {
    return DataViewStore.selectModel
  }

  @Watch('modelData.data')
  public getModelData() {
    this.init()
  }

  public created() {
    this.init()
  }

  public init() {
    const { data } = this.modelData

    this.featureString = data?.feature_list?.toString()
    this.feature_list2 = data?.feature_list
    this.colWidth = this.getColWidth()
    // const detailElement = document.querySelectorAll('#detail')
    this.$nextTick(() => {
      const detailElement: any = this.$refs.detail
      detailElement?.forEach((detail: any) => {
        detail.style.display = 'block'
        detail.style.zIndex = -1000
        if (
          detail.parentElement?.offsetLeft + detail.offsetWidth >
          document.body.clientWidth - 96
        ) {
          detail.style.marginLeft = `${-detail.offsetWidth - 30}px`
        }
        detail.style.zIndex = 99
        detail.style.display = ''
      })
    })
  }

  public getSpan(index: any) {
    let sum: any = 0
    for (let i = 0; i < this.modelData?.data?.cluster_sizes.length; i += 1) {
      sum += this.modelData.data.cluster_sizes[i]
    }
    const number: any = `${
      (this.modelData.data.cluster_sizes[index] * 100) / sum
    }%`
    // const number: any = (this.modelData.data.cluster_sizes[index] * 24) / sum
    // if (number - Math.floor(number) >= 0.6) {
    //   number = Math.floor(number) + 1
    // } else {
    //   number = Math.floor(number)
    // }

    return number
  }

  public getColWidth() {
    const col = Math.ceil(this.feature_list2?.length / 9)
    const colArray: any = [] // new Array(this.modelData?.data?.cluster_centers.length).fill(new Array(col))
    this.modelData?.data?.cluster_centers?.forEach((element: any) => {
      const array: any = []
      for (let j = 0; j < col; j += 1) {
        const lenthArray: any = []
        for (let i = 0; i < 9; i += 1) {
          // const string = `${this.feature_list2[i+j*9]}:${this.modelData?.data?.cluster_centers[0][i+j*9]}`
          const string = `${this.feature_list2[i + j * 9]}:${
            element[i + j * 9]
          }`
          lenthArray.push(string.length)
        }
        array.push(`${Math.max(...lenthArray) * 8}px`)
      }
      colArray.push(array)
    })
    return colArray

    // const array: any = []
    // for(let i=0;i<9;i+=1){
    //   const string = `${this.feature_list2[i+col*9]}:${item[i+col*9]}`
    //   array.push(string.length)
    // }
    // return `${Math.max(...array)*7.5}px`
  }

  public rgbColor() {
    const r = Math.floor(Math.random() * 256)
    const g = Math.floor(Math.random() * 256)
    const b = Math.floor(Math.random() * 256)
    const rgb = `rgb(${r},${g},${b})`
    return rgb
  }
}
</script>

<style lang="less" scoped>
.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 22px;

  b {
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}

.julei {
  .text {
    margin-bottom: 8px;

    span {
      line-height: 20px;
      margin-top: 16px;
    }

    .tooltip-text {
      margin-left: 20vw;
      max-width: 30vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .colorBlock {
    .general {
      height: 80px;
      position: relative;

      .circle {
        background-color: #fff;
        border-radius: 50%;
        height: 6px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 6px;
      }

      .dash {
        display: none;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
      }

      .size-text {
        color: #fff;
        font-size: 16px;
        margin: 46px 0 0 12px;
      }

      .detail {
        background: rgba(0, 0, 0, 0.6);
        border-radius: 2px;
        box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05),
          0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
        color: #fff;
        display: none;
        left: calc(50% + 20px);
        min-width: 80px;
        padding: 8px;
        position: absolute;
        top: 44px;
        // top: 14px;
        z-index: 99;

        .row {
          display: flex;
          padding: 0 10px;
        }

        p {
          margin: 0;
        }
      }

      &:hover {
        .dash {
          display: inline-block;
        }

        .detail {
          display: inline-block;
        }
      }
    }

    .left {
      background: #6973ff;
    }

    .center {
      background: #59bf61;
    }

    .right {
      background: #fbc94a;
    }
  }
}
</style>
